/**
* @description: 临时工单 ==> 临时工单审批列表/监控列表（我发起的）
* @author: JiWei
* @date:
**/
<template>
  <view class="task-monitor">
    <nav-bar class="header" :background="backgroundColor" back :title="title" @goBack="goBack">
      <img slot="iconfont" src="../../../../static/img/add.png" alt="" @click="addTask">
    </nav-bar>
    <view class="header-bar">
      <!-- 切换tab -->
      <div class="get-state-tab">
        <div class="info-tab-item"
             :class="currentTab === 'approval' ? ' info-tab-current': ''"
             @click="tabChange('approval')">工单审批</div>
        <div class="info-tab-item"
             :class="currentTab === 'progress' ? ' info-tab-current': ''"
             @click="tabChange('progress')">工单进度</div>
      </div>
      <ul class="menu">
        <li v-for="(item,index) in menuList" :key="index" @click="chooseMenu(item, index)">
          <view class="right-box">
            <text class="menu-num" :class="{selectmenu:index === current}">{{ item.value }}</text>
            <text class="menu-state" :class="{selectmenu:index === current}">{{ item.title }}</text>
          </view>
          <view :class="{sj:index === current}"></view>
        </li>
      </ul>
    </view>
    
    <view class="patrol-search">
      <van-search disabled show-action v-model="searchValue"
        left-icon="" action-text="重置"
        right-icon="search" placeholder="请输入站点名称"
        @click="showSearch=true" @cancel="onSearch('')" />
    </view>
  
    <!--工单审批-->
    <view v-if="currentTab === 'approval'">
      <view class="task-main">
        <view class="task-list-container"  v-if="approvalList.length > 0">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="isLoading"
              :finished="finished"
              finished-text="没有更多了"
              @load="loadMore"
            >
              <view class="task-list" v-for="(item,index) in approvalList" :key="index" @click="jump(item)">
                <view class="task-top">
                  <img src="../../../../static/img/light.png" alt="">
                  <text class="equip-title">{{ item.name }}</text>
                  <!-- 通过 -->
                  <text class="equip-state-wc" v-if="item.state === '1'">
                    {{ item.stateName }}
                  </text>
                  <!-- 待审批 -->
                  <text class="equip-state-wzx" v-else-if="item.state === '0'">
                    {{ item.stateName }}
                  </text>
                  <!-- 拒绝 -->
                  <text class="equip-state-zxz" v-else-if="item.state === '-1'">
                    {{ item.stateName }}
                  </text>
                  <!-- 已作废/已撤销 -->
                  <text class="equip-state-cx" v-else>
                    {{ item.stateName }}
                  </text>
                </view>
                <hr class="patrol-hr">
                <ul class="task-list-main">
                  <li>
                    <text class="task-title">巡视站点：</text>
                    <text class="task-titles">{{ item.siteName }}</text>
                  </li>
                  <li>
                    <text class="task-title">发起人：</text>
                    <text class="task-titles">{{ item.operName }}</text>
                  </li>
                  <li>
                    <text class="task-title">发起时间：</text>
                    <text class="task-titles">{{item.receiveTim}}</text>
                  </li>
                </ul>
          
              </view>
        
        
        
            </van-list>
          </van-pull-refresh>
        </view>
      </view>
    </view>
  
    <!--工单进度-->
    <view v-else>
      <view class="task-main">
        <view class="task-list-container"  v-if="monitorList.length > 0">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="isLoading"
              :finished="finished"
              finished-text="没有更多了"
              @load="loadMore"
            >
              <view class="task-list" v-for="(item,index) in monitorList" :key="index">
                <view @click="jump(item)">
                  <view class="task-top">
                    <img src="../../../../static/img/light.png" alt="">
                    <text class="equip-title">{{ item.NAME }}</text>
                    <text class="equip-state-wc" v-if="item.TASK_STATE_NAME === '已完成'">
                      {{ item.TASK_STATE_NAME }}
                    </text>
                    <text class="equip-state-wzx" v-else-if="item.TASK_STATE_NAME === '未执行'">
                      {{ item.TASK_STATE_NAME }}
                    </text>
                    <text class="equip-state-zxz" v-else-if="item.TASK_STATE_NAME === '执行中'">
                      {{ item.TASK_STATE_NAME }}
                    </text>
                  </view>
                  <hr class="patrol-hr">
                  <ul class="task-list-main">
                    <li>
                      <text class="task-title">计划巡视时间：</text>
                      <text class="task-titles">{{ item.JHXSKSSJS }} ～ {{ item.JHXSJSSJS }}</text>
                    </li>
                    <li v-if="item.TASK_STATE_NAME === '已完成'">
                      <text class="task-title">实际巡视时间：</text>
                      <text class="task-titles">{{ item.SJXSKSSJS }} - {{ item.SJXSJSSJS }}</text>
                    </li>
                    <li>
                      <text class="task-title">巡视站点：</text>
                      <text class="task-titles">{{ item.TASK_SITE_NAME }}</text>
                    </li>
                    <li>
                      <text class="task-title">巡视负责人：</text>
                      <text class="task-titles">{{ item.XSFZR }}</text>
                    </li>
<!--                    <li>-->
<!--                      <text class="task-title">巡视人员：</text>-->
<!--                      <text class="task-titles">{{ item.XSRY }}</text>-->
<!--                    </li>-->
                  </ul>
                </view>
                <!-- 圆加虚线   -->
                <view class="by"></view>
                <view class="byr"></view>
                <hr class="task-hr">
                <view class="bottom-patrol">
                  <view class="left-bottom-patrol">
                    <text>工单进度：</text>
                    <text>{{item.YWC}}/{{item.TOTAL}}</text>
                  </view>
                  <view class="right-bottom-patrol" v-if="item.ISWG === '1' && item.TASK_STATE !== '99'&& item.XSFZRID === userData.userId">
                    <van-button type="info" class="patrol-btn" @click="toReceive(item, 'COMPLETE')">完工</van-button>
                  </view>
                </view>
          
              </view>
              
            </van-list>
          </van-pull-refresh>
        </view>
      </view>
    </view>
    
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search-equ-match @cancel="showSearch = false;" @search="onSearch" :empty="showSearch"/>
    </van-popup>
  </view>
</template>
<script>
import navBar from "../../../../components/common/nav-bar";
import searchEquMatch from '../../../common/searchEquMatch'
import {mapGetters} from "vuex";
import moment from "moment";
import {Dialog} from "vant";
import {temporaryTaskList} from "../../../../api/apiIndex";

export default {
  name: 'patrolTaskMonitor',
  components: { navBar, searchEquMatch },
  props: {},
  data() {
    return {
      backgroundColor:'#417ADC',
      title:'临时工单审批列表',
      currentTab: 'approval',
      current:0,
      approvalCurrent:'',
      menuList:[],
      monitorList:[],
      approvalList:[],
      showSearch: false,
      searchValue:'',
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      total: 0, // 总条数
      page: 1,
      limit:20,
      approvalTotal: 0,
      approvalPage: 1,
      approvalLimit:20,
    };
  },
  computed: {
    ...mapGetters(['userData'])
  },
  watch: {
    currentTab: {
      immediate: true,
      handler: function (newVal) {
        if (newVal === "approval") {
          this.title = '临时工单审批列表';
        }
        
        else if (newVal === "progress") {
          this.title = '临时工单监控列表';
        }
      }
    }
  },
  onLoad() {
    this.onRefresh();
  },

  methods: {
    goBack() {
      uni.navigateTo({
        url: '/pages/index/index'
      })
    },
    tabChange(currentTab) {
      this.currentTab = currentTab;
      
      // 统计切换至“全部”
      this.current = 0;
      (currentTab === "approval") && (this.approvalCurrent = '');
      
      // 清空搜索框
      this.searchValue = '';
      this.onRefresh();
    },
    // 获取审批列表
    getTemporaryTaskList() {
      let params = {
        state: this.approvalCurrent,
        userId: this.userData.userId, // 是	string	登录用户ID
        roleId: this.userData.roleId, // 是	string	登录用户权限ID
        batchId: this.userData.batchId, // 否	string	批次ID
        name: this.searchValue,    // 否	string	任务名称
        limit: this.approvalLimit,  // 否	string	分页条数 不传查全部
        page: this.approvalPage,    // 否	string	分页页数 不传查全部
      }
      this.$api.temporaryTaskList(params).then(res => {
        this.isLoading = false;
        this.refreshing = false;
        this.menuList = [
          {
            title:'全部',
            value: res.data.total,
            state: '',
          }, {
            title:'待审批',
            value: res.data.notApproved,
            state: '0',
          }, {
            title:'审批通过',
            value: res.data.approved,
            state: '1',
          }, {
            title:'审批拒绝',
            value: res.data.unapproved,
            state: '-1',
          }
        ]
        this.approvalList = this.approvalList.concat(res.data.list.map(item => {
          return{
            receiveTim: item.receiveTim ? moment(item.receiveTim).format('YYYY-MM-DD HH:mm') : '',
            ...item
          }
        }));
        (this.approvalCurrent === '') && (this.approvalTotal = res.data.total);
        (this.approvalCurrent === '1') && (this.approvalTotal = res.data.approved);
        (this.approvalCurrent === '0') && (this.approvalTotal = res.data.notApproved);
        (this.approvalCurrent === '-1') && (this.approvalTotal = res.data.unapproved);
      })
    },
    // 获取监控列表
    getTaskListByInitiateP() {
      let parasm = {
        limit: this.limit,
        page: this.page,
        userId: this.userData.userId,
        task_state:this.current,
        siteName: this.searchValue,
        batchId: this.userData.batchId,
        orgId: this.userData.orgId,
        roleId: this.userData.roleId,
      }
      this.$api.getTaskListByInitiate(parasm).then(res => {
        this.isLoading = false;
        this.refreshing = false;
        this.menuList = [
          {
            title:'全部',
            value: res.data.state_count.QB
          },{
            title:'未执行',
            value: res.data.state_count.WZX
          },{
            title:'执行中',
            value: res.data.state_count.ZXZ
          },{
            title:'已完工',
            value: res.data.state_count.YWG
          }
        ]
        this.monitorList = this.monitorList.concat(res.data.taskList.map(item => {
          return{
            // 计划巡视时间
            JHXSKSSJS:item.JHXSKSSJ ? moment(item.JHXSKSSJ).format('YYYY-MM-DD HH:mm') : '',
            JHXSJSSJS: item.JHXSJSSJ ? moment(item.JHXSJSSJ).format('YYYY-MM-DD HH:mm') : '',
            // 实际巡视时间
            SJXSKSSJS:item.SJXSKSSJ ? moment(item.SJXSKSSJ).format('YYYY-MM-DD HH:mm') : '',
            SJXSJSSJS: item.SJXSJSSJ ? moment(item.SJXSJSSJ).format('YYYY-MM-DD HH:mm') : '',
            ...item
          }
        }));
        this.total = res.data.total_number
      })
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      if (this.currentTab === 'approval') {
        this.approvalPage = 1;
        this.approvalList = [];
        this.getTemporaryTaskList();
      }
      else if (this.currentTab === 'progress') {
        this.page = 1
        this.monitorList = [];
        this.getTaskListByInitiateP();
      }
    },
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    loadMore() {
      if (this.currentTab === 'approval') {
        if (this.approvalTotal > this.approvalList.length) {
          this.approvalPage = this.approvalPage + 1;
          this.getTemporaryTaskList();
        } else {
          this.finished = true;
        }
      }
      else if (this.currentTab === 'progress') {
        if (this.total > this.monitorList.length) {
          this.page = this.page + 1;
          this.getTaskListByInitiateP();
        } else {
          this.finished = true;
        }
      }
    },

    chooseMenu(item, index) {
      this.current = index;
      (this.currentTab === 'approval') && (this.approvalCurrent = item.state);
      this.onRefresh()
    },
    toReceive(item, state) {
      if (state === 'BACK') {
        Dialog.confirm({
          message: '是否确认退回？'
        }).then(() => {
          this.$api.getUpdateTask({ objId: item.OBJ_ID }).then(res => {
            this.onRefresh()
          })
        })
      } else {
        Dialog.confirm({
          message: '该工单是否确认完工？'
        }).then(() => {
          this.$api.updateTaskComplete({ objId: item.OBJ_ID, tourTim: moment().format('YYYY-MM-DD HH:mm:ss')}).then(res => {
            this.onRefresh()
          })
        })
      }
    },
    jump(item) {
      // 跳转计划工单审批详情
      if(this.currentTab === 'approval') {
        uni.navigateTo({
          url: `/pages/workBench/temporaryTask/taskMonitor/approvalDetail?objId=${item.objId}`
        });
      }
      // 跳转计划工单进度详情
      if(this.currentTab === 'progress') {
        uni.navigateTo({
          url: `/pages/workBench/temporaryTask/taskMonitor/taskMonitor?taskState=${item.TASK_STATE}&objId=${item.OBJ_ID}&taskStateName=${item.TASK_STATE_NAME}`
        })
      }
    },
    addTask() {
      // 跳转发起工单
      uni.navigateTo({
        url: `/pages/workBench/temporaryTask/initiateTask/initiateTask`
      })
    }
  }
};
</script>
<style scoped lang="scss">
.task-monitor {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .header {
    img {
      width: px2vw(48);
      margin-right: px2vw(40);
    }
  }
  .header-bar {
    height: px2vh(250);
    border-radius: 0 0 px2vh(40) px2vh(40);
    background: #417ADC;
    margin-bottom: px2vh(140);
    //display: flex;
    //justify-content: center;
    .get-state-tab {
      width: px2vw(1020);
      height: px2vh(120);
      margin: 0 auto px2vh(30);
      border-radius: px2vw(20);
      box-sizing: border-box;
      // margin: px2vh(40) px2vw(30) px2vh(37);
      background-color: rgba(255,255,255,0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      border: px2vw(2) solid rgba(198,215,245,1);
      .info-tab-item {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(255,255,255,1);
        font-weight: bold;
        font-size: px2vw(38);
        &.info-tab-current {
          height: px2vh(100);
          margin: 0 px2vw(10);
          margin-right: px2vw(10);
          border-radius: px2vw(20);
          background-color: rgba(255,255,255,0.7);
          color: rgba(65,122,220,1);
          font-weight: Bold;
        }
      }
    }
    .menu {
      width: px2vw(1020);
      height: px2vh(180);
      border: 1px solid #ffffff;
      border-radius: 10px;
      box-shadow: 0 0 18px 2px #fff inset;
      //background-image: url('../../../../static/img/borderR.png');
      background-color: rgba(243,247,255,0.95);
      //background-size: px2vw(1020) px2vh(220);
      margin: 0 auto;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      li {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        
        .right-box {
          text-align: center;
          .menu-num {
            display: block;
            font-size: px2vw(54);
            font-weight: bold;
            color: #333;
          }
          .menu-state {
            font-size: px2vw(36);
            color: #333;
          }
          .selectmenu {
            color: #417ADC;
          }
        }
        .sj {
          width: px2vw(78);
          height: px2vh(66);
          position: absolute;
          bottom: 0;
          //right: px2vw(40);
          left: 50%;
          transform: translate(-50%, 78%);
          background-image: url('../../../../static/img/sj.png');
          background-size: px2vw(78) px2vh(66);
        }
      }
    }
  }
  
  .patrol-search {
    width: px2vw(1020);
    height: 38px;
    margin: px2vw(20) px2vw(30);
    .van-search {
      padding: 0 0;
      height: 38px;
    }
    .van-search__content {
      background: #fff;
      height: 38px;
    }
    /deep/.van-field__control {
      height: 30px;
    }
  }
  .task-main {
    height: calc(100vh - #{px2vh(583)} - 38px);
    overflow: auto;
    position: relative;
    .task-list {
      width: px2vw(1020);
      padding-bottom: px2vh(30);
      //min-height: px2vh(416);
      //padding-bottom: px2vh(20);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      margin-top: px2vh(30);
      margin-left: px2vw(30);
      margin-bottom: px2vh(30);
      .task-top {
        width: calc(100% - #{px2vw(80)});
        margin-left: px2vw(40);
        height: px2vh(140);
        img {
          width: px2vw(64);
          height: px2vw(64);
          margin-top: px2vh(40);
          float: left;
        }
        .equip-title {
          color: #333;
          font-size: px2vw(48);
          width: px2vw(670);
          height: px2vh(48);
          line-height: px2vh(48);
          float: left;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          margin-top: px2vh(48);
          margin-left: px2vw(25);
        }
        .equip-state-wc,.equip-state-wzx, .equip-state-zxz, .equip-state-cx {
          display: flex;
          justify-content: center;
          align-items: center;
          width: px2vw(150);
          height: px2vh(50);
          font-size: px2vw(32);
          border-radius: px2vw(10);
          margin-top: px2vh(48);
          margin-left: px2vw(27);
          float: left;
          //text-align:center;
        }
        // 已完工/审批通过
        .equip-state-wc {
          color: #3CDA68;
          background: rgba(62,218,104,0.1);
        }
        // 未执行/待审批
        .equip-state-wzx {
          color: #FF7070;
          background: rgba(255,112,112,0.1);
        }
        // 执行中/审批拒绝
        .equip-state-zxz {
          color: #FFAD0E;
          background: rgba(255,180,0,0.1);
        }
        // 已作废/已撤销
        .equip-state-cx {
          color: #999;
          background: #eee;
        }
      }
      .patrol-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
      }
    }
    .task-list-main {
      width: px2vw(940);
      //height: px2vh(266);
      margin-left: px2vw(40);
      padding-bottom: px2vh(30);
      li {
        margin-top: px2vh(30);
        font-size: px2vw(36);
        .task-title {
          color: #666;
        }
        .task-titles {
          color: #333;
        }
      }
    }

    .task-hr {
      width: px2vw(940);
      border: 0;
      border-bottom: px2vh(6) dashed #e5e5e5;
      margin-top: px2vh(14);
      margin-left: px2vw(40);
    }
    .by {
      position: absolute;
      width: px2vw(40);
      height: px2vh(40);
      border-radius: px2vw(100);
      left: px2vw(12);
      float: left;
      background: #f2f6fa;
    }
    .byr {
      position: absolute;
      width: px2vw(40);
      height: px2vh(40);
      border-radius: px2vw(100);
      right: px2vw(12);
      float: right;
      background: #f2f6fa;
    }
    .bottom-patrol {
      width: px2vw(940);
      height: px2vh(54);
      margin-left: px2vw(40);
      margin-top: px2vh(26);
      font-size: px2vw(32);
      .left-bottom-patrol {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: px2vw(300);
        padding: 2px 4px;
        //height: px2vh(54);
        background: #ecf1fb;
        float: left;
        text-align: center;
        color: #417adc;
        border-radius: px2vw(8);
      }
      .right-bottom-patrol {
        width: px2vw(120);
        height: px2vh(54);
        float: right;
        .patrol-btn {
          width: px2vw(120);
          height: px2vh(54);
          background: #417adc;
          float: right;
          //border-radius: px2vw(20);
        }
        /deep/.van-button--normal {
          padding: 0;
        }
      }
    }

  }

}
</style>
